<!DOCTYPE html>
<html>
<head>   <!--先更新项目-->
    <meta charset="UTF-8">
    <title>商品分类</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>商品分类列表</h1>

    <input v-model="searchQuery" placeholder="搜索分类">
    <ul>

        <li v-for="category in categories" :key="category.name"
            v-show="category.name.includes(searchQuery)"
            @click="showCategoryInfo(category)">

            <span>{{ category.icon }}</span>
            <span>{{ category.name }}</span>
        </li>
    </ul>

    <div v-if="selectedCategory">
        <h2>选中的分类信息</h2>
        <p>名称: {{ selectedCategory.name }}</p>
        <p>图标: {{ selectedCategory.icon }}</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            // 搜索
            searchQuery: '',
            // 总共的分类
            categories: [
                { name: '电子产品', icon: '📱' },
                { name: '服装', icon: '👕' },
                { name: '食品', icon: '🍎' },
                { name: '图书', icon: '📚' },
                // 添加更多分类...
            ],
           // 选中的分类
            selectedCategory: null,
        },
        methods: {
            showCategoryInfo(category) {
                this.selectedCategory = category;
            }
        }
    });
</script>

</body>
</html>
